{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import callout with context %}

{% extends "firefox/welcome/base.html" %}

{% block page_title %}{{ ftl('page7-make-it-harder-for-facebook') }}{% endblock %}

{% block body_class %}{{ super() }} welcome-page7{% endblock %}

{% set _entrypoint = 'mozilla.org-firefox-welcome-7' %}
{% set _utm_campaign = 'welcome-7-fbcontainer' %}

{%block page_css %}
 {{ super()}}
 {{ css_bundle('protocol-callout') }}
{% endblock %}

{% block content_intro %}
{% call callout(
    title=ftl('page7-its-okay-to-like-facebook'),
    desc=ftl('page7-if-you-still-kinda-like-facebook'),
    class='mzp-t-firefox mzp-t-dark mzp-t-hero',
    include_cta=True,
    heading_level=1
  ) %}

  <p class="primary-cta">
    <a href="https://addons.mozilla.org/firefox/addon/facebook-container/?src=external-www.mozilla.org-welcome-7&utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}" class="mzp-c-button mzp-t-product" id="facebook-container-button" rel="external">
      {{ ftl('page7-get-facebook-container') }}
    </a>
  </p>

  {% endcall %}
{% endblock %}

{% block content_primary %}
  <div class="body-primary">
    <div class="c-picto-block t-adjacent-image">
      <div class="c-picto-block-image">
        <img src="{{ static('img/icons/photo-orange.svg') }}" alt="">
      </div>

      <h3 class="c-picto-block-title">{{ ftl('page7-do-it-for-the-gram') }}</h3>
      <div class="c-picto-block-body">
        <p>{{ ftl('page7-facebook-container-also-works') }}</p>
        <a href="https://addons.mozilla.org/firefox/addon/facebook-container/?src=external-www.mozilla.org-welcome-7&utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}" rel="external">
          <strong>{{ ftl('page7-make-them-unfollow-you') }}</strong>
        </a>
      </div>
    </div>

    {% if LANG.startswith('en-') %}
      <div class="c-picto-block t-adjacent-image">
        <div class="c-picto-block-image">
          <img src="{{ static('img/icons/audio-pink.svg') }}" alt="">
        </div>
        <h3 class="c-picto-block-title">Listen to this</h3>
        <div class="c-picto-block-body">
          <p>Why are companies like Google and Facebook doing everything they can to predict your behavior?</p>
          <a href="https://irlpodcast.org/season4/episode5/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}" rel="external">
            <strong>Listen to our IRL podcast</strong>
          </a>
        </div>
      </div>
    {% elif LANG == 'de' %}
      <div class="c-picto-block t-adjacent-image">
        <div class="c-picto-block-image">
          <img src="{{ static('img/icons/audio-pink.svg') }}" alt="">
        </div>
        <h3 class="c-picto-block-title">Hör’s dir rein</h3>
        <div class="c-picto-block-body">
          <p>Im Netz der Tracker: Niemand sollte ohne Zustimmung online verfolgt werden dürfen. Warum Online-Tracking problematisch ist und was es für unsere Gesellschaft bedeutet?</p>
          <a href="https://awebpodcast.org/staffel1/folge7/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}" rel="external">
            <strong>Jetzt im aweb Podcast</strong>
          </a>
        </div>
      </div>
    {% elif LANG == 'fr' %}
      <div class="c-picto-block t-adjacent-image">
        <div class="c-picto-block-image">
          <img src="{{ static('img/icons/audio-pink.svg') }}" alt="">
        </div>
        <h3 class="c-picto-block-title">Les traqueurs de réseaux sociaux, c’est quoi exactement ?</h3>
        <div class="c-picto-block-body">
          <p>Les plateformes de réseaux sociaux déposent des traqueurs sur d’autres sites afin de suivre ce que vous faites en ligne.</p>
          <a href="https://blog.mozilla.org/firefox/fr/que-sont-les-traqueurs-de-reseaux-sociaux/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}">
            <strong>Apprendre à les contourner</strong>
          </a>
        </div>
      </div>
    {% else %}
      <div class="c-picto-block t-adjacent-image">
        <div class="c-picto-block-image">
          <img src="{{ static('img/icons/facebook-button.svg') }}" alt="">
        </div>
        <h3 class="c-picto-block-title">{{ ftl('page7-that-sneaky-little-button') }}</h3>
        <div class="c-picto-block-body">
          <p>{{ ftl('page7-those-innocent-looking-f-buttons') }}</p>
        </div>
      </div>
    {% endif %}
    <div class="c-picto-block t-adjacent-image">
      <div class="c-picto-block-image">
        <img src="{{ static('protocol/img/logos/firefox/monitor/logo.svg') }}" alt="">
      </div>
      <h3 class="c-picto-block-title">
        {% if LANG == "en-US" %}
            Reclaim your stolen info from hackers
        {% else %}
          {{ ftl('page7-stay-ahead-of-hackers') }}
        {% endif %}
      </h3>
      <div class="c-picto-block-body">
        <p>
            {% if LANG == "en-US" %}
              Mozilla Monitor lets you see if you’ve been part of a data breach. And if you have, it automatically gets your private info back for you and continually monitors your identity for new leaks.
            {% else %}
              {{ ftl('page7-firefox-monitor-lets-you-find-v2') }}
            {% endif %}
        </p>
        <a href="https://monitor.mozilla.org/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}">
          <strong>

        {% if LANG == "en-US" %}
          Check for breaches now
        {% else %}
          {{ ftl('page7-get-mozilla-monitor') }}
        {% endif %}
          </strong>
        </a>
      </div>
    </div>
  </div>
{% endblock %}


{% block content_utility %}
<p>
  <strong>
    <a href="https://support.mozilla.org/kb/firefox-browser-welcome-pages/?utm_source={{ _entrypoint }}&utm_medium=referral&utm_campaign={{ _utm_campaign }}&entrypoint={{ _entrypoint }}">
      {{ ftl('page7-why-am-i-seeing-this') }}
    </a>
  </strong>
</p>
{% endblock %}
